
import React from "react";
import ReactDOM from "react-dom";



class StudentScoreTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data : [
                { name: '张三', gender: '男', chinese: 85, math: 98, _id: 0 },
                { name: '张三', gender: '女', chinese: 95, math: 90, _id: 1 },
                { name: '李四', gender: '男', chinese: 65, math: 48, _id: 2 },
                { name: '大妹', gender: '女', chinese: 95, math: 100, _id: 3 },
                { name: '王五', gender: '男', chinese: 75, math: 88, _id: 4 },
                { name: '赵钱', gender: '男', chinese: 75, math: 98, _id: 5 },
                { name: '二妹', gender: '女', chinese: 90, math: 98, _id: 6 }
            ],
            genderFilter:0,
            nameFilter:'',
            modifyScore:null,
            className:'dialog modify'
        }
    }
    onGenderChange(gender){
    	console.log("已经执行",this.state.genderFilter);
    	this.setState({genderFilter:gender});

    	console.log("已经执行2",this.state.genderFilter);
    	// 这里连个console输出其实同一个输出，而且为之前的的state.genderFilter 因为setSate本质上是一个promise
    }
    onDeleteScoreItem(id){
    	const data=this.state.data.map((item)=>{
    		if(item._id===id){
    			item.deleteFlag="true";
    		}
    		return item;
    	})
    	this.setState({data:data})
    }
    onNameChange(name){
    	this.setState({nameFilter:name});
    }
    onModify(id){
    	console.log("这里处理item修改的地方");
    }
    render() {
        return ( 
        	<div> 
        		<GenderFilter 
        			onGenderChange={this.onGenderChange.bind(this)}
        			genderFilter={this.genderFilter}
        		/>
        		<NameFilter
					NameChange={this.onNameChange.bind(this)}
					nameFilter={this.state.nameFilter}
					genderFilter={this.state.genderFilter}
        		/>
        		<ScoreTable
        			scoreNotes={this.state.data}
        			genderFilter={this.state.genderFilter}
        			nameFilter={this.state.nameFilter}
        			deleteScoreItem={this.onDeleteScoreItem.bind(this)}
        			modifyItem={this.onModify.bind(this)}

        		/>
        	</div>
        	)
    }
}

 class GenderFilter extends React.Component {

  constructor(props) {
    super(props);
  }
  genderChangeHandler() {
        this.props.onGenderChange(this.refs.genderFilter.value);
        // console.log(this.refs.genderFilter.value)
   }
  render() {
    return (
      <div className="genderFilterWrap">
			<label>
				<span>按性别筛选</span>
				<select onChange={this.genderChangeHandler.bind(this)} ref="genderFilter">
                        <option value="0">All</option>
                        <option value="1">男生</option>
                        <option value="2">女生</option>
                    </select>
			</label>
      </div>
    );
  }
}
 class NameFilter extends React.Component {


  constructor(props) {
    super(props);
 		
  }
  nameChangeHandler(){
  	// console.log(this);
  	this.props.NameChange(this.refs.nameFilter.value);
  }

  render() {
    return (
      <div className="nameFilterWrap">
			<label >
				<span>按名字筛选</span>
				<input type="text"
					ref="nameFilter"
					onChange={this.nameChangeHandler.bind(this)}
					 />
					
			</label>
      </div>
    );
  }
}

class ScoreTable extends React.Component{
	constructor(props){
		super(props);
    	// console.log(this);
	}
	deleteItemHandler(id){
		this.props.deleteScoreItem(id);
	}
	modifyItem(id){
		this.props.modifyItem(id);
	}
	render(){
		const genderFilter=+this.props.genderFilter,
			  nameFilter=this.props.nameFilter,
			  GENDER=['','男','女'],
			  _this=this;
		const scoreNotesList=[];
		this.props.scoreNotes.map((scoreItem)=>{
			console.log(genderFilter,nameFilter)
			if (genderFilter !== 0 && nameFilter === '') {
                // 仅genderfilter生效
                if (GENDER[genderFilter] === scoreItem.gender) {
                    !scoreItem.deleteFlag && scoreNotesList.push(<ScoreItem key={scoreItem._id} score={scoreItem} onDelete={this.deleteItemHandler.bind(this)} onModify={this.modifyItem.bind(this)}/>);
                }
                return;
            }
 
            if (genderFilter === 0 && nameFilter !== '') {
                // 仅nameFilter生效
                if (scoreItem.name === nameFilter) {
                    !scoreItem.deleteFlag && scoreNotesList.push(<ScoreItem key={scoreItem._id} score={scoreItem} onDelete={this.deleteItemHandler.bind(this)} onModify={this.modifyItem.bind(this)}/>);
                }
                return;
            }
 
            if (genderFilter !== 0 && nameFilter !== '') {
                // 两个filter都生效
                if (GENDER[genderFilter] === scoreItem.gender && scoreItem.name === nameFilter) {
                    !scoreItem.deleteFlag && scoreNotesList.push(<ScoreItem key={scoreItem._id} score={scoreItem} onDelete={this.deleteItemHandler.bind(this)} onModify={this.modifyItem.bind(this)}/>);
                }
                return;
            }
 
            !scoreItem.deleteFlag && scoreNotesList.push(<ScoreItem key={scoreItem._id} score={scoreItem} onDelete={this.deleteItemHandler.bind(this)} onModify={this.modifyItem.bind(this)}/>);
               
           
			
		});
		console.log(scoreNotesList,"这里是填充列表");
		return(
			// const scoreNotes=this.state.
			 <table>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>语文</th>
                        <th>数学</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {scoreNotesList}
                </tbody>
            </table>
		)
	}

}
class ScoreItem extends React.Component{
	constructor(props){
		super(props);
		console.log(this);
		this.state={
			score:this.props.score
		}
	}
	 deleteHandler(e, id) {
        this.props.onDelete(this.props.score._id);
    }
    modifyHandler() {
    	console.log(this);
        this.props.onModify(this.props.score._id);
    }
	render(){
		const score=this.state.score;
		return(

		 <tr>
                <td>{score.name}</td>
                <td>{score.gender}</td>
                <td>{score.chinese}</td>
                <td>{score.math}</td>
                <td><span className="trigger" onClick={this.modifyHandler.bind(this)}>修改</span><span className="trigger" onClick={this.deleteHandler.bind(this)}>删除</span></td>
            </tr>
		)
	}
}

const app=document.getElementById('app');
ReactDOM.render( 
	<div>
	<StudentScoreTable />

	</div>
	,app);
